<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">车辆详情</view>
		</view>
		<view class="bg_box">
			<view class="clear_box"></view>
			<!-- <image class="bg01" :src="logo" mode="widthFix"></image> -->
			<swiper class="swiper_box" :autoplay="true" :interval="3000" :duration="200">
				<block v-for="(item, index) in images" :key="index">
					<swiper-item style="height: 100%;">
						<view class="jun_down" @click.stop="auth_act(images)">一键下载图片</view>
						<view class="swiper-item" style="height: 100%;">
							<image :src="item" mode="aspectFill"></image>
							<view class="num_box">{{ index + 1 }}/{{ images.length }}</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="bg_content">
				<view class="top">
					<view class="text">车源编号：{{car_no}}</view>
				</view>
				<view class="product_box">
					<view class="title">{{title}}</view>
					<!-- <view class="tag_box">
						<view class="tag" v-for="(item,idx) in label">{{item.title}}</view>
					</view> -->
					<view class="circle_other">
						<view class="time">{{show_price}} 万</view>
						<!-- <view class="time" v-if="is_vip == 0">* 万</view> -->
						<view class="icon_box">
							<view class="icon">
								<view class="i iconfont icon-shoucang" v-if="collect_s == 0"></view>
								<view class="c iconfont icon-shoucang" v-if="collect_s > 0"></view>
								<view class="t" @tap="collect">收藏</view>
							</view>
							<view class="icon" @tap="copyTitle">
								<view class="i iconfont icon-huankuan"></view>
								<view class="t">复制</view>
							</view>
						</view>
					</view>
					<view class="time_box">
						<view class="time">发布时间：{{create_time}}</view>
						<view class="volume">更新时间：{{update_time}}</view>
					</view>
				</view>
				
				<view class="banner_box" :data-url="'/pages/goods/guarantee'" @click="gotopage02">
					<image :src="deposit_thumb" mode="scaleToFill"></image>
				</view>

				<view class="message_box">
					<view class="title">车辆信息</view>
					<view class="menu_box">
						<view class="menu">
							<view class="num">{{info.reg_time}}</view>
							<view class="text">上牌时间</view>
						</view>
						<view class="menu">
							<view class="num">{{info.production_date}}</view>
							<view class="text">出厂日期</view>
						</view>
						<view class="menu">
							<view class="num">{{info.procure_price}}</view>
							<view class="text">指导价格</view>
						</view>
					</view>
					<view class="other_box">
						<view class="other">
							<view class="o">排量</view>
							<view class="o">{{info.output}}</view>
						</view>
						<view class="other">
							<view class="o">变速箱</view>
							<view class="o">{{info.gearbox}}</view>
						</view>
						<view class="other">
							<view class="o">排放标准</view>
							<view class="o">{{info.outext}}</view>
						</view>
						<view class="other">
							<view class="o">过户次数</view>
							<view class="o">{{info.tran_num}}</view>
						</view>
						<view class="other">
							<view class="o">表显里程</view>
							<view class="o">{{info.mileage}}万公里</view>
						</view>
						<view class="other">
							<view class="o">车所在地</view>
							<view class="o">{{info.city}}</view>
						</view>
					</view>
				</view>
				<view class="message_box">
					<view class="title">车辆配置</view>
					<view class="description" v-html="configuration"></view>
				</view>
				<view class="message_box">
					<view class="title">详细情况</view>
					<view class="description" v-html="content"></view>
				</view>

				<view class="message_box">
					<view class="title">车辆实拍</view>
					<!-- <view class="message_img">
						<image src="../../static/cp03.png" mode="widthFix"></image>
					</view> -->
					<block v-for="(img,idx) in images">
						<view class="message_img">
							<image @longpress.stop="long_save(img)" @click="openPreviewImage(images,idx)" class="img" :src="img" mode="widthFix"></image>
						</view>
					</block>
				</view>
				<view class="name_box" v-if="info.plat == 1">
					<view class="avatar">
						<image :src="own_info.avatar" mode="scaleToFill"></image>
					</view>
					<view class="name_text">
						<view class="name">{{own_info.nickname}}</view>
						<view class="realname">
							<view class="real" v-if="own_info.is_sm>0">
								<view class="t" v-if="own_info.is_sm==1">已申请车商</view>
								<view class="t" v-if="own_info.is_sm==2">已认证车商</view>
							</view>
							<view class="real_1" v-if="own_info.is_sm==0">
								<view class="t">未认证车商</view>
							</view>
						</view>
					</view>
					<view class="message" :data-url="'/pages/other/other?user_id='+info.mid" @click="gotopage">
						<view class="round" >进店逛逛</view>
					</view>
				</view>
				<view class="clear_box04"></view>
			</view>
		</view>
		<view class="footer_f">
			<view class="footer_box">
				<view class="icon" @click="contract">
					<view class="i iconfont icon-wodekefu"></view>
					<view class="t">客服</view>
				</view>
				<view class="icon_1" @tap="off">
					<view class="i iconfont icon-xiazai"></view>
					<view class="t">帮他下架</view>
				</view>
				<!-- <view class="menu" @tap="off">帮他下架</view> -->
				<view class="menu" @tap="closePupu">拉群签合同</view>
				<view class="menu" @tap="contact">联系车商</view>
			</view>
		</view>
		
		<!-- <view class="publish_box" @click="contract">
			<view class="icon iconfont icon-wodekefu"></view>
		</view> -->
		
		<view class="publish_box" @click="push">
			<view class="icon iconfont icon-fabucheyuan"></view>
			<view class="text">发布</view>
		</view>

		<view class="fullscreen-mask" v-if="visible" >
			<view style="height: 10vh;padding-top: 100vw;text-align: center;color: #fff;">已下架</view>
		</view>
		
		<!-- 弹窗 -->
		<view class="pupu_box" @tap="closePupu" v-if="pupu">
			<view class="pupu_show" @tap.stop="">
				<view class="pupu_title">定金保障流程</view>
				<view class="close iconfont icon-guanbi1" @tap="closePupu"></view>
				<image class="bg01" src="../../static/flow01.png" mode="widthFix"></image>
				<view class="ewm">
					<image :src="transaction_image" mode="scaleToFill" show-menu-by-longpress="true"></image>
					<image src="../../static/flow02.png" mode="widthFix"></image>
				</view>
				<view class="rule"><span>[保障金交付]</span>双方达成交易，同意车界网平台规则将保障金支付平台代管，等待线下交易;</view>
				<view class="rule"><span>[交易完成]</span>车辆交接完成，双方财务退还保障金，支付200元服务费(会员100)，本次交易完成。</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu:false,
				page: 1,
				scrrol: false,
				info: '',
				id:0,
				phone:'',
				label:'',
				images:[],
				collect_s:0,
				reason:'',
				deposit_thumb:'',
				is_vip:0,
				user_call:0,
				call_num:0,
				title:'',
				logo:'',
				market_price:'',
				create_time:'',
				update_time:'',
				plat_phone:'',
				show_price:'',
				own_info:'',
				visible:false,
				deposit_image:'',
				configuration:'',
				content:'',
				plat_phone_arr:[],
				transaction_image:'',
				car_no:'',
			}
		},
		onLoad(e) {
			let that = this;
			that.id = e.id;
			that.loadData();
			that.addView();
		},
		methods: {
			closePupu(){
				let that = this;
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				that.pupu = !that.pupu;
			},
			push(){
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				uni.navigateTo({
					url: '/pages/service/publish01'
				});
			},
			loadData() {
				let that = this;
				that.Net._get('index/car_detail', {id:that.id}, res => {
					if (res.code == 1) {
						that.loading = 1;
						let list = res.data;
						that.images = list.picture;
						// that.label = JSON.parse(list.labels);
						that.info = list;
						that.collect_s = res.data.collect;
						that.deposit_thumb = res.data.deposit_thumb;
						that.is_vip = res.data.is_vip;
						that.phone = res.data.phone;
						that.user_call = res.data.user_call;
						that.call_num = res.data.call_num;
						that.title = list.title;
						that.logo = list.logo;
						that.market_price = list.market_price;
						that.show_price = list.show_price;
						that.create_time = list.create_time;
						that.update_time = list.update_time;
						that.plat_phone = list.plat_phone;
						that.pickerText = list.prov + '-' + list.city;
						if(list.prov == list.city){
							that.pickerText = list.prov;
						}
						if (list.status == 2){
							that.visible = true;
						}
						that.deposit_image = list.deposit_image;
						that.content = list.content;
						that.configuration = list.configuration;
						that.plat_phone_arr = list.plat_phone_arr;
						that.transaction_image = list.transaction_image;
						that.car_no = list.car_no;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage02(e){
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			copyTitle(){
				let that = this;
				const textToCopy = '一口价：' + that.market_price + '\n【车辆款型】' + that.info.title + '\n【上牌日期】' + that.info.reg_time + '\n【出厂日期】' + that
					.info.production_date +
					'\n【指 导 价】' + that.info.procure_price + '\n【排     量】' + that.info.output + '\n【排放标准】' + that.info.outext +
					'\n【真实公里】' + that.info.mileage +
					'\n【车辆配置】' + that.info.configuration + '\n【详细车况】' + that.info.content + '\n【过户次数】' + that.info.tran_num +
					'\n【所 在 地】' + that.pickerText +
					'\n【卖家电话】' +'https://cjw.fj37.com/car.html?id='+that.id+'\n（点击车界网小程序链接，获取更多车源信息，批发车源可在小程序发布，专员同步推广，谈好联系管理员拉群签合同）';
				uni.setClipboardData({
				    data: textToCopy,
				    success: function () {
				        uni.showToast({
							title: '复制成功',
							icon: 'success',
				            duration: 2000
				        });
				    }
				});
			},
			collect(){
				let that = this;
				that.Net._post('auth/team/collect', {id:that.id,is_type:0}, res => {
					if (res.code == 1) {
						var msg = '收藏成功';
						if (res.data == 1){
							this.collect_s = 1;
						}else{
							this.collect_s = 0;
							msg = '取消成功';
						}
						that.Msg.Success(msg, res => {
							
						});
					}
				});
			},
			off(){
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				let that = this;
				uni.showActionSheet({
					itemList: ['已出售', '信息有误', '不走定金保障流程'],
					success: function (res_1) {
						uni.showModal({
						    title: '确认提示',
						    content: '是否确认提交下架申请',
						    success:(res) => {
						        if (res.cancel){
						            return false;
						        }
								that.Net._post('auth/team/off_car', {id:that.id,reason:res_1.tapIndex}, res => {
									if (res.code == 1) {
										that.Msg.Success('提交成功，等待审核', res => {
											
										});
									}
								});
						    }
						});
						console.log('选中了第' + (res_1.tapIndex + 1) + '个按钮');
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			contact(){
				let that = this;
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				if (that.is_vip == 0){
					uni.showModal({
					    title: '此功能仅限会员使用，开通vip可无限次数联系',
					    content: '',
						confirmText:'去开通',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/personalcenter/member/member'
								});
								return '';
					        } else if (res.cancel) {
								
					        }
					    }
					})
					return '';
				}
				uni.showModal({
				    title: '联系车商',
				    content: that.phone,
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm && that.is_vip == 1) {
							uni.makePhoneCall({
								phoneNumber: that.phone //仅为示例
							});
							that.Net._post('auth/team/call_num', {id:that.id}, res => {
								
							});
				        } else if (res.cancel) {
							
				        }
				    }
				})
			},
			addView(){
				let that = this;
				that.Net._post('other/other_shop', {id:that.id}, res => {
					if (res.code == 1) {
						that.own_info = res.data;
					}
				});
			},
			contract(){
				let that = this;
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				uni.showModal({
				    title: '联系客服',
				    content: that.plat_phone,
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm) {
							const phone = that.plat_phone_arr[0]
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				            // 用户点击了取消按钮的相关逻辑可以放在这里
				        }
				    }
				})
			},
			auth_act(imgs) {
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						this.saveImageToPhotosAlbum = true
						this.down_imgs(imgs);
					},
					fail: () => {
						// 拒绝授权，获取当前设置，单独授权
						uni.getSetting({
							success: (result) => {
								if (!result.authSetting['scope.writePhotosAlbum']) {
									uni.showModal({
										content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (result) => {
														//console.log('授权成功', result);
														this.saveImageToPhotosAlbum = true
														this.down_imgs(imgs);
													}
												});
											}
										}
									});
									//console.log('用户关闭了权限')
								}
							}
						});
					}
				})
			},
			down_imgs(imgs) {
				if (this.saveImageToPhotosAlbum) {
					let num = imgs.length - 1;
					for (let x in imgs) {
						uni.downloadFile({
							url: imgs[x],
							success: res => {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: res => {
										if (x == num) {
											this.Msg.Success('图片已保存', res => {
												
											});
										}
									},
									fail: () => {
										//this.showMsg('已取消');
									}
								});
							},
							fail: err => {
								//this.showMsg('下载失败');
								this.saveImageToPhotosAlbum = false
							}
						})
					}
				} else {
					this.auth_act(imgs);
				}
			},
			openPreviewImage(e,index) {
				let that = this;
				let img_ = e;
				uni.previewImage({
					current: index, // 当前显示图片索引
					urls: img_,
					loop:true
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			// that.Net._get('shop_goods', {per_page:'10',page:that.page,}, res => {
			//   if (res.code == 200) {
			//     //console.log(res)
			//     if (res.data.data == '') {
			//       uni.showToast({
			//         title: '已经是最后一页了',
			//         duration: 2000,
			//         icon: 'none'
			//       });
			//     } else {
			//       that.info = that.info.concat(res.data.data); //将数据拼接在一起
			//     }
			//   } else if (res.code == 0) {
			//     that.Msg.Success(res.msg, res => {});
			//   }
			// });
		},
	}
</script>

<style>
	.fullscreen-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;
	}
	.header {
		background-color: transparent !important;
		height: 18vw !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}
	
	.header .back {
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #F9E9E3 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 100%;
		position: absolute;
		left: 0;
		top: calc(40vh + var(--status-bar-height));
		z-index: 98;
		background-color: #F8F8F8;
		border-radius: 3vw 3vw 0 0;
		padding: 4%;
	}

	.product_box {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4%;
	}

	.product_box .title {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		line-height: 7vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.product_box .tag_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 1vw;
	}

	.product_box .tag_box .tag {
		height: 6vw;
		line-height: 6vw;
		padding: 0 1.5vw;
		border-radius: 1vw;
		font-size: 2.8vw;
		margin-left: 1vw;
		background-color: #F7F8FD;
		color: #222222;
	}

	.product_box .tag_box .tag:nth-child(1) {
		margin-left: 0;
	}

	.product_box .tag_box .tag:nth-child(1) {
		background-color: #FDF1C2;
		color: #BC8519;
	}

	.product_box .tag_box .tag:nth-child(2) {
		background-color: #FEEFEC;
		color: #DB2114;
	}

	.product_box .tag_box .tag:nth-child(3) {
		background-color: #F7F8FD;
		color: #222222;
	}

	.product_box .time_box {
		width: 100%;
		padding-top: 4%;
		border-top: 1px solid #F1F2F5;
		display: flex;
		align-items: center;
		margin-top: 4%;
	}

	.product_box .time_box .time {
		font-size: 3.2vw;
		color: #979AA9;
		flex: 1;
	}

	.product_box .time_box .volume {
		font-size: 3.2vw;
		color: #979AA9;
		flex: 1;
		text-align: right;
	}

	.message_box {
		width: 100%;
		margin: 4% auto 0;
		background-color: #fff;
		border-radius: 3vw;
		padding: 4%;
	}

	.message_box .description {
		width: 100%;
		font-size: 3.5vw;
		margin-top: 4%;
		color: #333;
		line-height: 6vw;
	}
	
	.message_box .message_img{
		width: 100%;
		margin-top: 4%;
	}
	
	.message_box .message_img image{
		width: 100%;
	}

	.message_box .title {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}

	.message_box .menu_box {
		width: 100%;
		background-color: #FDF8F6;
		padding: 4vw 0;
		border: 1px solid #FFB599;
		display: flex;
		align-items: center;
		border-radius: 3vw;
		margin-top: 4vw;
	}

	.message_box .menu_box .menu {
		flex: 1;
	}

	.message_box .menu_box .menu .num {
		font-size: 4vw;
		font-weight: bold;
		color: #333;
		text-align: center;
	}

	.message_box .menu_box .menu .text {
		font-size: 3.5vw;
		color: #606470;
		text-align: center;
		margin-top: 2vw;
	}

	.other_box {
		margin-top: 4%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.other_box::after {
		flex: auto;
		content: '';
	}

	.other_box .other {
		width: 44%;
		margin-left: 12%;
		display: flex;
		align-items: center;
		margin-top: 3vw;
	}

	.other_box .other:nth-child(2n + 1) {
		margin-left: 0;
	}

	.other_box .other .o {
		flex: 1;
		font-size: 3.5vw;
	}

	.other_box .other .o:nth-child(1) {
		color: #8B8C9F;
	}

	.other_box .other .o:nth-child(2) {
		color: #1E2128;
	}
	
	.footer_f{
		width: 100%;
		background: #fff;
		height: 17vw;
		left: 0;
		bottom: 0vw;
		z-index: 998;
		display: flex;
		align-items: center;
		position: fixed;
	}
	.footer_box{
		width: 92%;
		/* width: 100%; */
		height: 13vw;
		display: flex;
		align-items: center;
		position: fixed;
		left: calc(50% - 46%);
		/* left: 0; */
		bottom: 4vw;
		/* bottom: 0vw; */
		z-index: 999;
	}
	
	.footer_box .icon{
		width: 13vw;
		height: 100%;
		background-color: #fff ;
		border-radius: 2vw 0 0 2vw;
	}
	
	.footer_box .icon .i{
		font-size: 4vw;
		color: #333;
		text-align: center;
		margin-top: 2vw;
	}
	
	.footer_box .icon .t{
		font-size: 3vw;
		color: #333;
		margin-top: 1vw;
		text-align: center;
	}
	
	.footer_box .icon_1{
		width: 13vw;
		height: 100%;
		background-color: #fff ;
	}
	
	.footer_box .icon_1 .i{
		font-size: 4vw;
		color: #333;
		text-align: center;
		margin-top: 2vw;
	}
	
	.footer_box .icon_1 .t{
		font-size: 3vw;
		color: #333;
		margin-top: 1vw;
		text-align: center;
	}
	
	.footer_box .menu{
		color: #fff;
		flex: 1;
		font-size: 4vw;
		font-weight: bold;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.footer_box .menu:nth-child(2){
		background-color: #fff;
		color: #333;
	}
	
	.footer_box .menu:nth-child(3){
		background-color: #333;
	}
	
	.footer_box .menu:nth-child(4){
		background-color: #FC5D20;
		border-radius: 0 2vw 2vw 0;
	}
	
	.banner_box{
		width: 100%;
		height: 20vw;
		margin-top: 4%;
	}
	
	.banner_box image{
		width: 100%;
		height: 100%;
		border-radius: 3vw;
	}
	
	.circle_other {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}
	
	.circle_other .time {
		font-weight: bold;
		font-size: 5vw;
		color: #E6201F;
	}
	
	.circle_other .icon_box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}
	
	.circle_other .icon_box .icon {
		width: 16vw;
		display: flex;
		align-items: center;
	}
	
	.circle_other .icon_box .icon .i {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
	}
	
	.circle_other .icon_box .icon .t {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_other .icon_box .icon .c {
		font-size: 3.6vw;
		color: #FF9800;
		font-weight: bold;
	}
	
	.publish_box{
		width: 24vw;
		height: 11vw;
		border-radius: 11vw;
		padding: 0 1.5vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		position: fixed;
		right: 4%;
		bottom: 10vh;
		z-index: 999;
	}
	
	.publish_box .icon{
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		background-color: #fff;
		font-size: 4vw;
		color: #FE9129;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.publish_box .text{
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	.jun_down {
		position: absolute;
		right: 20rpx;
		color: #fff;
		top: 30rpx;
		background-color: rgba(0, 0, 0, 0.7);
		font-size: 22rpx;
		padding: 12rpx 16rpx;
		border-radius: 20rpx;
		z-index: 1;
	}
	.swiper_box {
		width: 100%;
		height: 300px;
		position: relative;
		box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
	}
	
	.swiper_box .num_box {
		width: 80rpx;
		height: 40rpx;
		border-radius: 30px;
		background-color: #000;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		position: absolute;
		right: 30rpx;
		top: 450rpx;
		z-index: 99999;
		color: #fff;
		letter-spacing: 4rpx;
	}
	
	.swiper_box image {
		width: 100%;
		height: 100%;
	}
	
	.top {
	    width: 92%;
	    margin: -2vw auto 3vw;
	    justify-content: space-between;
	}
	
	    
	.top .text {
	    color: #1E2128;
	    font-size: 3.5vw;
	    margin-top: 3.3vw;
	}
	.name_box {
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
		background-color: #f5eeee;
	}
	
	.name_box .avatar {
		width: 18vw;
		height: 18vw;
		/* margin-right: 2%;
		margin-left: 2%; */
		margin: 2%;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.name_box .avatar image {
		width: 90%;
		height: 90%;
		border-radius: 50%;
	}
	
	.name_box .name_text {
		flex: 1;
	}
	
	.name_box .name_text .name {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
	}
	
	.name_box .name_text .realname {
		margin-top: 2vw;
		display: flex;
	}
	
	.name_box .name_text .realname .real {
		height: 7vw;
		padding: 0 2vw 0 3vw;
		border-radius: 7vw;
		background-color: #FC5D20;
		display: flex;
		align-items: center;
	}
	
	.name_box .name_text .realname .real .t {
		font-size: 3vw;
		color: #fff;
		margin-right: 0.5vw;
	}
	
	.name_box .name_text .realname .real .r {
		font-size: 2.7vw;
		color: #fff;
	}
	
	.name_box .name_text .realname .real_1 {
		height: 7vw;
		padding: 0 2vw 0 3vw;
		border-radius: 7vw;
		background-color: #b1aba9;
		display: flex;
		align-items: center;
	}
	.name_box .name_text .realname .real_1 .t {
		font-size: 3vw;
		color: #fff;
		margin-right: 0.5vw;
	}
	
	.name_box .name_text .realname .real_1 .r {
		font-size: 2.7vw;
		color: #fff;
	}
	.name_box .message {
		position: relative;
		/* margin-right: 4%; */
	}
	
	.name_box .message .icon {
		font-size: 2vw;
		color: #333;
	}
	
	.name_box .message .round {
		height: 6vw;
		width: 20vw;
		/* box-sizing: border-box;
		border-radius: 50%; */
		text-align: center;
		/* position: absolute; */
		right: 0vw;
		top: 0;
		color: #FC5D20;
		border: 1px solid #FC5D20;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	.pupu_box .pupu_show {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		padding: 5vw 4vw;
		position: relative;
	}
	
	.pupu_box .pupu_show .pupu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	
	.pupu_box .pupu_show .close{
		font-size: 4vw;
		color: #333;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}
	
	.pupu_box .bg01{
		width: 100%;
		height: 95vh;
	}
	
	.pupu_box .ewm{
		width: 100%;
		background-color: #F7F7F7;
		padding: 4vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 3vw;
	}
	
	.pupu_box .ewm image{
		width: 40vw;
		height: 40vw;
	}
	
	.pupu_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.pupu_box .rule{
		width: 92%;
		margin: 4% auto;
		font-size: 3.2vw;
		color: #333;
	}
	
	.pupu_box .rule span{
		color: #f00;
	}
</style>